import { FC, useState, memo, useCallback } from "react";

const Child: FC<any> = memo(() => {
  console.log("Child Render");
  return <h1>Child</h1>;
});

interface Props {}
const Fc8: FC<Props> = () => {
  const [num, setNum] = useState(1);
  // const onIncrement = () => setNum(num + 1);
  // const onIncrement = useCallback(() => setNum(num + 1), [num]); // 返回一个缓存的函数  后续不管怎么更新 就这个地址
  const onIncrement = useCallback(() => setNum(7777), []); // 返回一个缓存的函数  后续不管怎么更新 就这个地址

  // useEffect(() => {
  // }, [])  // 仅首次触发
  // useEffect(() => {
  // }, [num])  // 首次 + num变化  其他都触发
  // useEffect(() => {
  // })  // 首次+后续

  const [num2, setNum2] = useState(2);

  return (
    <fieldset>
      <legend>11-useCallback</legend>
      <h1>num {num}</h1>
      <button onClick={onIncrement}>num+1</button>
      <h1>num2 {num2}</h1>
      <button onClick={() => setNum2(num2 + 1)}>num2+1</button>

      {/* <Child num={num}  />   num变就重新渲染 */}

      {/* <Child setNum={setNum} setNum2={setNum2} />  永不渲染*/}

      <Child setNum={setNum} setNum2={setNum2} onIncrement={onIncrement} />
    </fieldset>
  );
};

export default Fc8;
